<template>
  <a-modal
    :visible="modelValue"
    @update:visible="val => emit('update:modelValue', val)"
    :title="file?.fileName"
    :footer="null"
    class="preview-modal"
    @cancel="handleClose"
    :destroyOnClose="true"
    :width="1000"
    :closable="true"
    :maskClosable="true"
    :centered="true"
  >
    <!-- 视频预览 -->
    <div v-if="file?.fileType === 1" class="preview-container video-preview">
      <div class="video-wrapper">
        <video controls :src="file.fileUrl" preload="metadata" class="video-player">
          <source :src="file.fileUrl" type="video/mp4" />
          您的浏览器不支持视频播放。
        </video>
      </div>
      <div class="video-controls">
        <div class="control-item">
          <span>播放速度</span>
          <a-select v-model:value="playbackRate" style="width: 100px" @change="handleSpeedChange">
            <a-select-option :value="0.5">0.5x</a-select-option>
            <a-select-option :value="1.0">正常</a-select-option>
            <a-select-option :value="1.5">1.5x</a-select-option>
            <a-select-option :value="2.0">2.0x</a-select-option>
          </a-select>
        </div>
        <div class="control-item">
          <span>画面比例</span>
          <a-select v-model:value="aspectRatio" style="width: 100px">
            <a-select-option value="default">默认</a-select-option>
            <a-select-option value="16:9">16:9</a-select-option>
            <a-select-option value="4:3">4:3</a-select-option>
          </a-select>
        </div>
        <div class="control-item">
          <span>画面旋转</span>
          <a-select v-model:value="rotation" style="width: 100px">
            <a-select-option value="0">正常</a-select-option>
            <a-select-option value="90">90°</a-select-option>
            <a-select-option value="180">180°</a-select-option>
            <a-select-option value="270">270°</a-select-option>
          </a-select>
        </div>
      </div>
    </div>

    <!-- 图片预览 -->
    <div v-else-if="file?.fileType === 3" class="preview-container image-preview">
      <img :src="file.fileUrl" :alt="file.fileName" />
    </div>

    <!-- 音频预览 -->
    <div v-else-if="file?.fileType === 2" class="preview-container audio-preview">
      <audio controls :src="file.fileUrl" class="audio-player" />
      <div class="audio-info">
        <img :src="audioIcon" alt="audio" class="audio-icon" />
        <span class="file-name">{{ file.fileName }}</span>
      </div>
    </div>

    <!-- PDF预览 -->
    <div v-else-if="file?.fileType === 4" class="preview-container pdf-preview">
      <iframe :src="file.fileUrl" frameborder="0"></iframe>
    </div>

    <!-- 文本预览 -->
    <div v-else-if="file?.fileType === 7" class="preview-container text-preview">
      <pre>{{ fileContent }}</pre>
    </div>

    <!-- 其他文件类型 -->
    <div v-else class="preview-container unsupported-preview">
      <img :src="getFileIcon(file?.fileType)" alt="file" class="file-icon" />
      <p class="file-name">{{ file?.fileName }}</p>
      <p class="file-tip">该文件类型暂不支持预览，请下载后查看</p>
      <a-button type="primary" @click="handleDownload">下载文件</a-button>
    </div>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue'
  import { message } from 'ant-design-vue'
  import audioIcon from '@/assets/files/音乐.png'
  import docIcon from '@/assets/files/doc.png'
  import excelIcon from '@/assets/files/excel.png'
  import txtIcon from '@/assets/files/txt.png'
  import codeIcon from '@/assets/files/code.png'
  import zipIcon from '@/assets/files/zip.png'
  import otherIcon from '@/assets/files/其他.png'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    file: {
      type: Object,
      default: null,
    },
  })

  const emit = defineEmits(['update:modelValue', 'download'])

  const fileContent = ref('')

  // 视频控制相关
  const playbackRate = ref(1.0)
  const aspectRatio = ref('default')
  const rotation = ref('0')

  // 监听文件变化
  watch(
    () => props.file,
    async newFile => {
      if (newFile?.fileType === 7) {
        try {
          const response = await fetch(newFile.fileUrl)
          fileContent.value = await response.text()
        } catch {
          message.error('文件内容加载失败')
        }
      }
    },
    { immediate: true }
  )

  // 处理播放速度变化
  const handleSpeedChange = value => {
    const video = document.querySelector('.video-player')
    if (video) {
      video.playbackRate = value
    }
  }

  // 监听画面比例变化
  watch(aspectRatio, newValue => {
    const video = document.querySelector('.video-player')
    if (video) {
      switch (newValue) {
        case '16:9':
          video.style.aspectRatio = '16/9'
          break
        case '4:3':
          video.style.aspectRatio = '4/3'
          break
        default:
          video.style.aspectRatio = 'auto'
      }
    }
  })

  // 监听画面旋转变化
  watch(rotation, newValue => {
    const video = document.querySelector('.video-player')
    if (video) {
      video.style.transform = `rotate(${newValue}deg)`
    }
  })

  // 获取文件图标
  const getFileIcon = (fileType: number) => {
    switch (fileType) {
      case 5:
        return docIcon
      case 6:
        return excelIcon
      case 7:
        return txtIcon
      case 8:
        return codeIcon
      case 9:
        return zipIcon
      default:
        return otherIcon
    }
  }

  // 关闭弹窗
  const handleClose = () => {
    emit('update:modelValue', false)
    // 重置视频控制
    playbackRate.value = 1.0
    aspectRatio.value = 'default'
    rotation.value = '0'
  }

  // 下载文件
  const handleDownload = () => {
    emit('download')
  }
</script>

<style scoped>
  .preview-modal {
    :deep(.ant-modal-content) {
      background: #1a1a1a;
      border-radius: 8px;
      overflow: hidden;
    }

    :deep(.ant-modal-header) {
      background: #1a1a1a;
      border-bottom: 1px solid #333;
      padding: 16px 24px;

      .ant-modal-title {
        color: #fff;
        font-size: 16px;
      }
    }

    :deep(.ant-modal-close) {
      color: #fff;

      &:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.1);
      }
    }

    :deep(.ant-modal-body) {
      padding: 0;
      height: 700px;
      background: #1a1a1a;
    }
  }

  .preview-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: #1a1a1a;
  }

  .video-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;

    .video-player {
      width: 100%;
      height: 100%;
      max-height: 600px;
      object-fit: contain;
      background: #000;
    }
  }

  .video-controls {
    display: flex;
    justify-content: center;
    gap: 20px;
    padding: 16px;
    background: #242424;
    border-top: 1px solid #333;
  }

  .control-item {
    display: flex;
    align-items: center;
    gap: 8px;

    span {
      color: #fff;
      font-size: 14px;
    }
  }

  :deep(.ant-select) {
    .ant-select-selector {
      background: #333 !important;
      border-color: #444 !important;
      color: #fff !important;
    }

    .ant-select-arrow {
      color: #fff;
    }
  }

  .image-preview {
    align-items: center;
    justify-content: center;
    padding: 20px;

    img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
    }
  }

  .audio-preview {
    background: #fff;
    flex-direction: column;
    padding: 40px;

    .audio-player {
      width: 100%;
      margin-bottom: 20px;
    }

    .audio-info {
      display: flex;
      align-items: center;
      margin-top: 20px;

      .audio-icon {
        width: 48px;
        height: 48px;
        margin-right: 12px;
      }

      .file-name {
        font-size: 16px;
        color: #333;
      }
    }
  }

  .pdf-preview {
    background: #fff;

    iframe {
      width: 100%;
      height: 100%;
    }
  }

  .text-preview {
    background: #fff;
    padding: 20px;
    overflow: auto;

    pre {
      width: 100%;
      margin: 0;
      white-space: pre-wrap;
      word-wrap: break-word;
      font-family: monospace;
      font-size: 14px;
      line-height: 1.5;
    }
  }

  .unsupported-preview {
    background: #fff;
    align-items: center;
    justify-content: center;
    padding: 40px;

    .file-icon {
      width: 80px;
      height: 80px;
      margin-bottom: 16px;
    }

    .file-name {
      font-size: 16px;
      color: #333;
      margin-bottom: 8px;
    }

    .file-tip {
      color: #999;
      margin-bottom: 20px;
    }
  }
</style>
